import TodoTemplate from "./TodoTemplate";
import { ITodoData } from "./typing";
import { createItem, findParentNote } from "./utils";

class TodoDom extends TodoTemplate{

    private todoWrapper: HTMLElement;

    constructor (todoWrapper: HTMLElement) {
        super();
        this.todoWrapper = todoWrapper;
    }

    protected initList (todoData: ITodoData[]) {
        if (todoData.length) {
            const oFrga: DocumentFragment = document.createDocumentFragment();
            todoData.forEach((todo: ITodoData) => {
                const OItem: HTMLElement = createItem('div', 'todo-item', this.todoView(todo));
                oFrga.appendChild(OItem);
            })
            this.todoWrapper.appendChild(oFrga);
        }
    }
        
    protected addItem (todo: ITodoData): void {
        const OItem: HTMLElement = document.createElement('div');
        OItem.className = 'todo-item';
        OItem.innerHTML = this.todoView(todo);
        this.todoWrapper.appendChild(OItem);
    }

    protected removeItem (target: HTMLElement): void {
        const oParentNode: HTMLElement = findParentNote(target, 'todo-item');
        oParentNode.remove();
    }

    protected changeCompleted (target: HTMLElement, completed: boolean) {
        const oParentNode: HTMLElement = findParentNote(target, 'todo-item');
        const oContent = oParentNode.querySelector('span');
        oContent.style.textDecoration = completed ? 'line-through' : 'none';
    }
}

export default TodoDom;